<template lang="html">
    <div v-loading="loading">
        <div :class="$style.carousel">
            <el-container>
                <!-- <el-header :class="$style.header">
                    <el-row>
                        <el-col
                            align="right"
                        >
                            <el-button plain>
                                登陆
                            </el-button>
                        </el-col>
                    </el-row>
                </el-header> -->
                <el-main>
                    <el-row>
                        <el-col
                            :span="20"
                            align="left"
                        >
                            <h2 style="margin: 0 auto;">
                                进出场记录(天昌物流车场)
                            </h2>
                        </el-col>
                        <el-col
                            :span="4"
                            align="right"
                        >
                            <el-button @click="jumpLoginPage()">
                                登陆
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <!-- <el-col
                            :span="3"
                            align="center"
                        >
                            <el-select
                                v-model="filterValue"
                                placeholder="筛选类型"
                            >
                                <el-option
                                    v-for="item in filterOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-col> -->
                        <el-col
                            :span="5"
                            align="center"
                        >
                            <el-input
                                v-model="filterInputContent"
                                placeholder="请输入箱号"
                            />
                        </el-col>
                        <el-col
                            :span="3"
                            align="center"
                        >
                            <!-- <el-button-group> -->
                            <el-button
                                type="primary"
                                @click="filter()"
                            >
                                搜索
                            </el-button>
                            <!-- <el-button
                                    type="warning"
                                    icon="el-icon-refresh"
                                    @click="restoreFilter()"
                                >
                                    恢复
                                </el-button> -->
                            <!-- </el-button-group> -->
                        </el-col>
                        <el-col
                            :span="24"
                            align="center"
                        >
                            <!-- :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" -->

                            <el-table
                                ref="caryardTable"
                                :data="caryardPaginationData"
                                stripe
                                highlight-current-row
                                style="width: 100%"
                                height="500"
                            >
                                <!-- :row-class-name="tableRowEntryType" -->
                                <el-table-column
                                    property="id"
                                    label="ID"
                                    align="center"
                                    width="60"
                                />
                                <el-table-column
                                    property="case_number"
                                    label="箱号"
                                    width="160"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="size"
                                    label="尺寸"
                                    width="80"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="box_type"
                                    label="箱型"
                                    width="80"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="empty_weight"
                                    label="空重"
                                    width="80"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="box_owner_code"
                                    label="箱主代码"
                                    width="110"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="entry_type"
                                    label="进场类型"
                                    width="110"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="dynamic_type"
                                    label="动态类型"
                                    width="110"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="number_plate"
                                    label="车牌号"
                                    width="100"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    property="bill_of_lading_number"
                                    label="提单号"
                                    width="200"
                                    align="center"
                                    sortable
                                />
                                <el-table-column
                                    prop="stack_location"
                                    property="stack_location"
                                    label="堆位"
                                    width="80"
                                />
                                <!-- <el-table-column
                                    property="stack_location"
                                    label="堆位"
                                    width="80"
                                    align="center"
                                    sortable
                                /> -->
                                <el-table-column
                                    property="note"
                                    label="备注"
                                    align="center"
                                />
                                <el-table-column
                                    property="create_time"
                                    label="创建时间"
                                    width="100"
                                    align="center"
                                    sortable
                                    :formatter="formatterTime"
                                />
                            </el-table>
                            <div :class="$style.pagination">
                                <el-pagination
                                    :page-sizes="[5, 10, 20, 50]"
                                    :page-size="caryardListPerPage"
                                    :total="caryardListTotal"
                                    :current-page="caryardListCurrentPage"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    @current-change="current_change"
                                    @size-change="caryardListSizeChange"
                                />
                            </div>
                        </el-col>
                    </el-row>
                </el-main>
                <el-footer :class="$style.footer">
                    ©2020 湛江市天昌物流有限公司 版权所有 <a
                        href="http://www.beian.miit.gov.cn/"
                        target="_blank"
                    >粤ICP备 - 18045940号-2</a>
                </el-footer>
            </el-container>
        </div>
        <!-- <Banner /> -->
        <!-- <Search /> -->
        <!-- <UserFunc /> -->
    </div>
</template>

<script>
// import Heador from './Header.vue'
// import Banner from './Banner.vue'
// import Search from './Search.vue'
// import UserFunc from './Userfunc.vue'
import XEUtils from 'xe-utils/methods/xe-utils'
import objectMethods from 'xe-utils/methods/object'
import arrayMethods from 'xe-utils/methods/array'
import baseMethods from 'xe-utils/methods/base'
import numberMethods from 'xe-utils/methods/number'
import dateMethods from 'xe-utils/methods/date'
import stringMethods from 'xe-utils/methods/string'
import functionMethods from 'xe-utils/methods/function'
import urlMethods from 'xe-utils/methods/url'
import browseMethods from 'xe-utils/methods/browse'

XEUtils.mixin(
    // Object
    objectMethods,
    // Array
    arrayMethods,
    // Base
    baseMethods,
    // Number
    numberMethods,
    // Date
    dateMethods,
    // String
    stringMethods,
    // Function
    functionMethods,
    // URL
    urlMethods,
    // Browse
    browseMethods
)

export default {
    data() {
        return {
            loading: false,
            duixiangOptions: [{
                    text: '好箱区A1',
                    value: '好箱区A1'
                },
                {
                    text: '好箱区A2',
                    value: '好箱区A2'
                },
                {
                    text: '残箱区',
                    value: '残箱区'
                },
                {
                    text: '修箱区',
                    value: '修箱区'
                },
                {
                    text: '未修好箱区A1',
                    value: '未修好箱区A1'
                },
                {
                    text: '未修好箱区A2',
                    value: '未修好箱区A2'
                },
            ],
            filterInputContent: '',
            filterOptions: [{
                value: 'case_number',
                label: '箱号'
            }, {
                value: 'number_plate',
                label: '车牌号'
            }, {
                value: 'stack_location',
                label: '堆位'
            }, {
                value: 'bill_of_lading_number',
                label: '提单号'
            }],
            filterValue: '',
            caryardDataCache: [],
            caryardList: [],
            caryardListTotal: 0,
            caryardListCurrentPage: 1,
            caryardListPerPage: 10,
        }
    },
    methods: {
        init() {
            // this.getCaryardList();
        },
        jumpLoginPage(){
            window.location.href = 'http://admin.caryard.liguoqin.com';
        },
        current_change: function(currentPage) {
            this.caryardListCurrentPage = currentPage;
        },
        caryardListSizeChange: function(size) {
            this.caryardListPerPage = size;
        },
        // getCaryardList() {
        //     this.$store.dispatch('getCaryardList').then(res => {
        //         // this.caryardList = res.data;
        //         this.caryardDataCache = res.data;
        //         this.caryardList = res.data;
        //         this.caryardListTotal = res.data.length;
        //         // this.caryardListCurrentPage = res.data.current_page;
        //         // this.caryardListPerPage = res.data.per_page;
        //     });
        // },
        tableRowEntryType({
            row,
            rowIndex
        }) {
            if (row.entry_type == "装") {
                return 'table-warning-row';
            } else if (row.entry_type == "拆") {
                return 'table-success-row';
            }
            return '';
        },
        formatterTime(row, column) {
            // return XEUtils.toDateString(Date.now());
            return XEUtils.toDateString(row.create_time + '000');
        },
        restoreFilter() {
            if (!XEUtils.isEmpty(this.caryardDataCache)) {
                this.caryardList = this.caryardDataCache;
                this.caryardListTotal = this.caryardDataCache.length;
            }
        },
        filter() {
            // if (this.filterValue == "") {
            //     this.$message({
            //         message: "类型不能为空",
            //         type: 'error',
            //         duration: 1500
            //     })
            //     return false;
            // }
            if (this.filterInputContent == "") {
                this.$message({
                    message: "搜索内容不能为空",
                    type: 'error',
                    duration: 1500
                })
                return false;
            }
            this.loading = true;
            this.$store.dispatch('getCaryardByCaseNumber',this.filterInputContent.trim()).then(res => {
                // this.caryardList = res.data;
                this.caryardDataCache = res.data;
                this.caryardList = res.data;
                this.caryardListTotal = res.data.length;
                this.loading = false;
                // this.caryardListCurrentPage = res.data.current_page;
                // this.caryardListPerPage = res.data.per_page;
            }).catch(res=>{
                this.loading = false;
            });
            // if (XEUtils.isEmpty(this.caryardDataCache)) {
            //     this.caryardDataCache = this.caryardList;
            // }
            // var newCaryardData = [];
            // XEUtils.each(this.caryardDataCache, (item, key) => {
            //     // 通用迭代器，支持遍历任意类型
            //     var temp = "";
            //     switch (this.filterValue) {
            //         case 'case_number':
            //             temp = item.case_number;
            //             break;
            //         case 'number_plate':
            //             temp = item.number_plate;
            //             break;
            //         case 'stack_location':
            //             temp = item.stack_location;
            //             break;
            //         case 'bill_of_lading_number':
            //             temp = item.bill_of_lading_number;
            //             break;
            //         default:
            //     }
            //     if (temp.indexOf(this.filterInputContent) != -1) {
            //         newCaryardData.push(item)
            //     }
            // })
            // this.caryardList = newCaryardData;
            // //点击搜索后，自动跳转到第一页
            // this.caryardListCurrentPage = 1;
            // //点击搜索后，更改总条数
            // this.caryardListTotal = this.caryardList.length
        }
    },
    created() {
        this.init();
    },
    components: {
        // Banner,
    },
    computed: {
        caryardPaginationData: function() {
            return this.caryardList.slice((this.caryardListCurrentPage - 1) * this.caryardListPerPage, this.caryardListCurrentPage * this.caryardListPerPage)
        }
    },
    watch: {

    },
}
</script>

<style lang="scss" module scoped>
.carousel {
    margin: auto;
    padding: auto;
    width: 1400px;
    font-size: 15px;
    margin-top: 30px;
    align-items: center;
    .tongzhiguangbo {
        width: 20px;
        height: 20px;
    }
}
.header {
    height: 50px;
}
.footer {
    margin: auto;
    padding: auto;
    margin-top: 100px;
}
.pagination {
    margin-top: 30px;
}
</style>
